<template>
	<div class="content">
		<scroll-view class="question">
			<view class="item" :class="{reverse:item.role!='user'}" v-for="(item,index) in history">
				<text class="text">{{item.content}}</text>
				<uni-icons :type="item.role=='user'?'person':'qq'" color="#4e7ca1" size="25" ></uni-icons>
			</view>
		</scroll-view>
		<view class="word">
			<uni-easyinput style="width: 80%;" class="input" v-model="question" placeholder="请输入提问内容" />
			<button class="btn" @tap="send">提问</button>
		</view>
	</div>
</template>
<script setup>
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		ref
	} from 'vue'
	import {
		CONFIG
	} from "../../utils/config";
	let model = ref({
		"model": "moonshot-v1-8k",
		"messages": [],
		"temperature": 0.3
	})
	let history = ref([])
	let question = ref("")
	async function send() {
		    history.value.push({
				"role": "user", "content":  question.value
			})
			model.value.messages=history.value
	       let res=await uni.$post(CONFIG.kimi_url,model.value)
		   console.log(res)
		   history.value.push(res.data.choices[0].message)
	     //清空文本框
		   question.value=""
		   
		}
</script>

<style lang="scss" scoped>
	.content {
		height: calc(100vh - 97px);
		position: relative;
		.question {
			height: calc(100vh - 97px - 65px);
			overflow-y: auto;
			padding: 10px;

			.item {
				display: flex;
				width: 720rpx;
				margin-top: 5px;
				justify-content: end;

				.text {
					border: 2px solid gray;
					border-radius: 5px;
				}
			}

			.reverse {
				flex-direction: row-reverse;
			}
		}

		.word {
			display: block;
			position: fixed;
			/* 固定位置 */
			bottom: 20px;
			/* 沉底 */
			left: 3px;
			/* 从左边开始 */
			width: 100%;
			/* 宽度占满整个屏幕宽度 */
			z-index: 1000;

			/* 确保输入框在其他元素之上 */
			.btn {
				width: 60px;
				text-align: center;
				height: 35px;
				border-radius: 5px;
				font-size: 13px;
				background-color: skyblue;
				color: #fff;
				float: right;
				right: 8px;
				bottom: 36px;
			}
		}
	}
</style>